/**
取消全部的外边距和内边距
 */
* {
    padding: 0;
    margin: 0;
}

/*设置窗口的样式*/
.mainWindow {
    overflow: hidden;
    -webkit-user-select: none;
    background-color: #FFFFFF;
    cursor: pointer; /*设置手型*/
    border: 1px solid red; /*加一个边框 调试样式 最后要删除或者更改**/
    width: 428px; /*设置宽度  必须要和主进程中设置的一样 不能大于主进程中设置的宽度 否则会出现滚动条*/
    height: 326px; /*设置高度  必须要和主进程中设置的一样 不能大于主进程中设置的高度 否则会出现滚动条*/
    position: relative; /*设置为相对定位*/
    border-radius: 4px; /*设置圆角*/
}

/**
header的样式 header中只会有一个关闭按钮 处于右上角
 */
.mainWindow header.header {
    position: absolute; /*设置绝对定位 因为背景在他下面*/
    height: 30px; /*设置高度*/
    background: rgba(255, 255, 255, 0.2); /*暂时设置的 后面要删除或者更改*/
    text-align: right;
    border-radius: 4px 4px 0 0; /*给header的左上角 右上角设置圆角 不然会出现很尴尬的页面*/
    width: 428px; /* 因为设置了绝对定位 设置宽度*/
}

.mainWindow header.header span {
    display: inline-block;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    color: #E4393c;
}

.mainWindow header.header span:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

/**
背景
 */
.mainWindow main .bg {
    height: 124px; /*设置高度*/
    width: 428px; /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    border-radius: 4px 4px 0 0; /*给左上角 右上角设置圆角 不然会出现很尴尬的页面 这里和header重合在一起了*/
    background: url("../images/login-back.gif") 10px;
    background-size: 100%;
}

/**
放置表单的元素
 */
.mainWindow main {
    position: absolute;
}
.mainWindow main .body {
    position: absolute;
    width: 428px; /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    height: 202px; /*设置高度 这里的高度是 主窗口(326) - footer(30) - 背景(124) 因为header设置了绝对定位 所以不用关 */
    background: #FFFFFF; /*暂时设置的 后面要删除或者更改*/
}

.mainWindow footer.footer {
    position: absolute; /* 设置绝对定位 要让他处于窗口的最底部*/
    height: 30px; /*设置高度 */
    background: #FFFFFF; /*暂时设置的 后面要删除或者更改*/
    bottom: 0; /*让footer处于底部*/
    width: 428px; /* 因为设置了绝对定位 设置宽度*/
    border-radius: 0 0 4px 4px;
}

.footer span {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 30px;
    padding-left: 10px;
}

.form form {
    padding: 10px 90px 0 90px;
}

.form_item {
    height: 40px;
    position: relative;
}

.form_item i.iconfont {
    position: absolute;
    top: 5px;
}

.form_item input {
    outline: none;
    border: none;
    padding-left: 20px;
    font-size: 16px;
    width: 230px;
    height: 30px;
    border-bottom: 1px solid #CCC;
}

.buttons {
    text-align: center;
}

.buttons button {
    background-color: #CF000E;
    border: none;
    width: 250px;
    color: #FFFFFF;
    height: 35px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
}

.login_options {
    margin-bottom: 13px;
    margin-top: 9px;
}

.login_options .option_item {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    position: relative;
    border: 1px solid orange;
    vertical-align: middle;
    cursor: pointer;
    top: -2px;
}

.login_options .option_item input {
    opacity: 0;
}

.login_options i.text {
    display: inline-block;
    margin-right: 14px;
    font-size: 13px;
    font-style: normal;
}

.login_options .option_item span.checked {
    position: absolute;
    top: -4px;
    right: -3px;
    font-weight: bold;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.option_item span.checked img {
    width: 100%;
    height: 100%;
}

input[type="checkbox"] + span {
    opacity: 0;
}

input[type="checkbox"]:checked + span {
    opacity: 1;
}

.captcha {
    position: absolute;
    width: 120px;
    height: 30px;
    top: -2px;
    right: 0;
}

.captcha img {
    width: 100%;
    height: 100%;
}

.send_sms_captcha {
    position: absolute;
    top: -2px;
    right: 0;
}
.send_sms_captcha  button{
    width:120px;
    height: 30px;
    border:none;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
}